.Docs
1.0
Versi Documentation
Peterdaw
Made by
18 May 2022
Created

Get Started

Documentation guide to use Ziro HTML Template

Introduction

Thanks for purchasing our template...

Ziro is a website template which built on HTML5, CSS3, and Javascript. This template is made to work on any type of browser and any type of devices (responsive). To make the customization process easier, we use SASS. We also use other plugins like Bootstrap 5, JQuery, Swiper, etc.

Folder Structure

This is the sctructure of the Folder and File which you get.

  • assets
  • dist
    • css
      • style.css
      • style.css.map
    • js
      • theme.js
  • js
    • theme.js
  • scss
    • components
      • bootstrap
        • accordions
        • cards
        • forms
        • _accordions.scss
        • _avatar.scss
        • _blog-slider.scss
        • _cards.scss
        • _counter.scss
        • _event-banner-slider.scss
        • _forms.scss
        • _image-slider.scss
        • _pagination.scss
        • _social-btn-group.scss
        • _testimonial-slider.scss
    • pages
      • _freelancerlist.html
      • _homepage.html
      • _jobdetail.html
      • _joblist.html
    • vendors
      • bootstrap
        • forms
        • mixins
        • _buttons.scss
        • _dropdown.scss
        • _forms.scss
        • _images.scss
        • _mixins.scss
        • _reboot.scss
        • _root.scss
        • _type.scss
        • _utilities.scss
        • _variables.scss
    • _bootstrap.scss
    • _components.scss
    • _fonts.scss
    • _footer.scss
    • _navbar.scss
    • _pages.scss
    • style.scss
  • vendors
  • applicationform.html
  • eventlist.html
  • freelancerlist.html
  • index.html
  • jobdetail.html
  • joblist.html
  • prepros.config

Main HTML Structure

In each HTML file, there are 3 main parts Navbar / Main / Footer but the only part Main will changes depend on the page content itself. 

<!DOCTYPE html>
<html lang="en">
<head>
    ...
</head>
<body class="page__name">
    <nav class="navbar navbar-expand-xl">
        ...
    </nav>
    <!-- = /. Navbar Section = -->

    <main class="main">
        ...
    </main>
    <!-- = /. Main Section = -->

    <footer class="footer bg-black">
        ...
    </footer>
    <!-- = /. Footer Section = -->

    ...
</body>
</html>

Installation

For the installation, we didn't useNodeJs and every plugin we used, we donwload them mannually withoutNode Package.

But we used Prepros to compile the file SCSS and live preview purpose. To make compile process easier, you can follow this step:

  1. Install Propros first if you don't have one.
  2. Install and open the Prepos application, and then if you make an edit, it will be automatically compiled the SCSS file.